<!DOCTYPE html>
<html>

<head>
    <meta http-equiv="Content-Type" content="text/html;charset=UTF-8" />
    <!--Extjs version 6.2.0 -->
    <link href="css/theme-classic-all.css" rel="stylesheet" />
    <script type="text/javascript" src="locale/locale-zh_CN.js"></script>
    <script type="text/javascript" src="js/ext-all.js"></script>
    <script type="text/javascript">
        //Card布局__类似向导
        Ext.application({
            name: 'HelloExt',
            launch: function() {
                var navigate = function(panel, direction) {
                    var layout = panel.getLayout();
                    layout[direction]();
                    Ext.getCmp('move-prev').setDisabled(!layout.getPrev());
                    Ext.getCmp('move-next').setDisabled(!layout.getNext());
                };
                Ext.create('Ext.panel.Panel', {
                    title: 'Card布局示例',
                    width: 300,
                    height: 202,
                    layout: 'card',
                    activeItem: 0,
                    x: 30,
                    y: 60,
                    bodyStyle: 'padding:15px',
                    defaults: {
                        border: false
                    },
                    bbar: [{
                            id: 'move-prev',
                            text: '上一步',
                            handler: function(btn) {
                                navigate(btn.up("panel"), "prev");
                            },
                            disabled: true
                        },
                        '->', {
                            id: 'move-next',
                            text: '下一步',
                            handler: function(btn) {
                                navigate(btn.up("panel"), "next");
                            }
                        }
                    ],
                    items: [{
                        id: 'card-0',
                        html: '<h1>第一步</h1>'
                    }, {
                        id: 'card-1',
                        html: '<h1>第二步</h1>'
                    }, {
                        id: 'card-2',
                        html: '<h1>最后一步</h1>'
                    }],
                    renderTo: Ext.getBody()
                });
            }
        });
    </script>
</head>

<body>

</body>

</html>